<style lang="scss" scoped>
.perfect {
  height: 100vh;
  width: 100vw;
  .perfect1 {
    // background-color: pink;
    padding: 20px;
    div {
      padding: 10px 0;
      p {
        font-size: 14px;
        color: #7f7f7f;
        margin-top: 25px;
      }
      .el-input {
        width: 100%;
        height: 60px;
      }
    }
  }
  .perfect2 {
    // background-color: pink;
    padding: 20px;
    div {
      padding: 10px 0;
      p {
        font-size: 14px;
        color: #7f7f7f;
        margin-top: 25px;
      }
      .el-input {
        width: 100%;
        height: 60px;
      }
    }
  }
  .perfect3 {
    .perfect3-item {
      padding: 5px 20px;
      p {
        font-size: 14px;
        color: #7f7f7f;
        margin-top: 25px;
        line-height: 30px;
      }
      .el-input {
        width: 100%;
        height: 60px;
      }
    }
  }
  .perfect4 {
    background-color: yellow;
  }
}
</style>

<template>
  <div class="perfect">
    <van-swipe
      ref="mySwiper"
      class="my-swipe"
      :show-indicators="false"
      :touchable="false"
      style="height: 100vh"
    >
      <van-swipe-item class="perfect1">
        <p style="font-size: 18px; color: #2894ff; margin-top: 20px">完善信息</p>
        <p style="font-size: 18px; color: #2894ff">审核通即可成功入入驻</p>
        <p style="font-size: 11px; color: red; margin-bottom: 20px">
          *填写正确信息有助于快速通过审核.
        </p>
        <div class="perfect1-item">
          <p>您的真实姓名</p>
          <el-input v-model="perfectData.name"></el-input>
          <p>您所在医院</p>
          <el-input v-model="perfectData.inauguralHospital"></el-input>
          <p>您所在科室</p>
          <el-select v-model="perfectData.departmentId" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="(item, index) in department"
              :key="index"
              :label="item.departmentName"
              :value="item.id"
            />
          </el-select>
          <p>您的职称</p>
          <el-select v-model="perfectData.jobTitleId" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="(item, index) in position"
              :key="index"
              :label="item.jobTitle"
              :value="item.id"
            />
          </el-select>
        </div>
        <el-button
          type="primary"
          round
          @click="nextSwiper"
          size="large"
          style="width: 90%; position: absolute; bottom: 50px"
          >下一步</el-button
        >
      </van-swipe-item>
      <van-swipe-item class="perfect2">
        <p style="font-size: 18px; color: #2894ff; margin-top: 20px">完善信息</p>
        <p style="font-size: 18px; color: #2894ff">审核通即可成功入入驻</p>
        <div class="perfect1-item">
          <p>您的邮箱账号</p>
          <p style="position: relative">
            <el-input v-model="perfectData.email"></el-input>
            <el-button
              type="primary"
              @click="getCode(perfectData.email)"
              style="width: 140px; height: 40px; position: absolute; top: 10px; right: 0"
              >获取验证码</el-button
            >
          </p>
          <p>请输入验证码</p>
          <el-input v-model="perfectData.code"></el-input>
          <p>请输入密码</p>
          <el-input v-model="perfectData.pwd1" show-password></el-input>
          <p>请再次输入密码</p>
          <el-input v-model="perfectData.pwd2" show-password></el-input>
        </div>
        <el-button
          type="primary"
          round
          @click="nextSwiper"
          size="large"
          style="width: 90%; position: absolute; bottom: 50px"
          >下一步</el-button
        >
      </van-swipe-item>
      <van-swipe-item class="perfect3">
        <van-nav-bar left-arrow @click-left="backSwiper" />
        <div class="perfect3-item">
          <p>请输入个人简介</p>
          <el-input
            v-model="perfectData.personalProfile"
            maxlength="500"
            :rows="8"
            style="width: 100%"
            placeholder="Please enter content..."
            show-word-limit
            type="textarea"
          />
        </div>
        <div class="perfect3-item">
          <p>您擅长的领域</p>
          <el-input
            v-model="perfectData.goodField"
            maxlength="300"
            :rows="6"
            style="width: 100%"
            placeholder="Please enter content..."
            show-word-limit
            type="textarea"
          />
        </div>
        <el-button
          type="primary"
          round
          @click="getPerfect"
          size="large"
          style="width: 90%; position: absolute; bottom: 50px; margin: 0 20px"
          >申请入驻</el-button
        >
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { JSEncrypt } from 'jsencrypt'
import { request } from '../../axios/request'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 获取验证码
const getCode = async (email: string) => {
  await request
    .post(
      '/api/health/doctor/v1/sendEmailCode',
      {
        email: email
      },
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then((res) => {
      console.log(res)
    })
}

// 申请入驻
const getPerfect = async () => {
  const crypt = new JSEncrypt()
  const publicKey =
    'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB'
  crypt.setPublicKey(publicKey)
  const newPwd1 = ref(crypt.encrypt(perfectData.value.pwd1))
  const newPwd2 = ref(crypt.encrypt(perfectData.value.pwd2))
  console.log(perfectData.value)
  console.log(newPwd1.value)
  console.log(newPwd2.value)
  if (perfectData.value.pwd1 === perfectData.value.pwd2) {
    await request
      .post(
        '/api/health/doctor/v1/applyJoin',
        {
          email: perfectData.value.email,
          code: perfectData.value.code,
          pwd1: newPwd1.value,
          pwd2: newPwd1.value,
          name: perfectData.value.name,
          inauguralHospital: perfectData.value.inauguralHospital,
          departmentId: perfectData.value.departmentId,
          jobTitleId: perfectData.value.jobTitleId,
          personalProfile: perfectData.value.personalProfile,
          goodField: perfectData.value.goodField
        },
        {
          headers: {
            'Content-Type': 'application/json'
          }
        }
      )
      .then((res) => {
        console.log(res)
        // 非空判断
        if (perfectData.value.email === ''||
          perfectData.value.code === '' ||
          perfectData.value.pwd1 === '' ||
          perfectData.value.pwd2 === '' ||
          perfectData.value.name === '' ||
          perfectData.value.inauguralHospital === '' ||
          perfectData.value.departmentId === '' ||
          perfectData.value.jobTitleId === '' ||
          perfectData.value.personalProfile === '' ||
          perfectData.value.goodField === ''
        ) {
          ElMessage.warning('请填写完整信息')
        }else {
          ElMessage.success('申请成功, 零点之后即可登录')
          router.push('/checkin')
        }
      })
  }
}

// 科室 + 职位
const department:any = ref([])
const position:any = ref(['主治医师', '副主任医师', '主任医师'])

// 获取科室
const getDepartment = async () => {
  await request.get('/api/health/share/knowledgeBase/v1/findDepartment').then((res) => {
    console.log(res.data)
    let { message, result, status } = res.data
    if (status === '0000') {
      console.log(message)
      department.value = result
      console.log(department.value)
    } else {
      console.log(message)
    }
  })
}
getDepartment()

// 职称
const getPosition = async () => {
  await request.get('/api/health/doctor/v1/findJobTitleList').then((res) => {
    console.log(res.data)
    let { message, result, status } = res.data
    if (status === '0000') {
      console.log(message)
      position.value = result
      console.log(position.value)
    } else {
      console.log(message)
    }
  })
}
getPosition()

// 入驻信息
const perfectData = ref({
  email: '', // 邮箱
  code: '', // 验证码
  pwd1: '', // 密码
  pwd2: '', // 确认密码
  name: '', // 姓名
  inauguralHospital: '', // 就职医院
  departmentId: '', // 科室
  jobTitleId: '', // 职位
  personalProfile: '', // 个人简介
  goodField: '' // 擅长领域
})

// 下一步
const mySwiper = ref()
const nextSwiper = () => {
  mySwiper.value.next()
  console.log(perfectData.value)
}
// 上一步
const backSwiper = () => {
  mySwiper.value.prev()
}
</script>